<div class="container loading-spinner" *ngIf="!isLoaded">
  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
</div>
<ng-container *ngIf="isLoaded">
  <app-organization-filter
    class="filter"
    [hide]="hideOrganizations"
    [activeFilter]="activeFilter"
    [collapsedFilterNodes]="collapsedFilterNodes"
    [organizations]="organizations"
    [activeOrganizationDataOwnership]="activeOrganizationDataOwnershipPolicy"
    [activeSingleOrganizationPolicy]="activeSingleOrganizationPolicy"
    (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
    (onFilterChange)="applyFilter($event)"
  ></app-organization-filter>
  <app-status-filter
    class="filter"
    [hideFavorites]="hideFavorites"
    [hideTrash]="hideTrash"
    [hideArchive]="!showArchiveVaultFilter"
    [activeFilter]="activeFilter"
    (onFilterChange)="applyFilter($event)"
  ></app-status-filter>
  <app-type-filter
    class="filter"
    [activeFilter]="activeFilter"
    [collapsedFilterNodes]="collapsedFilterNodes"
    (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
    (onFilterChange)="applyFilter($event)"
  ></app-type-filter>
  <app-folder-filter
    class="filter"
    [hide]="hideFolders"
    [activeFilter]="activeFilter"
    [collapsedFilterNodes]="collapsedFilterNodes"
    [folderNodes]="folders$ | async"
    (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
    (onFilterChange)="applyFilter($event)"
    (onAddFolder)="addFolder()"
    (onEditFolder)="editFolder($event)"
  ></app-folder-filter>
  <app-collection-filter
    class="filter"
    [hide]="hideCollections"
    [activeFilter]="activeFilter"
    [collapsedFilterNodes]="collapsedFilterNodes"
    [collectionNodes]="collections"
    (onNodeCollapseStateChange)="toggleFilterNodeCollapseState($event)"
    (onFilterChange)="applyFilter($event)"
  ></app-collection-filter>
</ng-container>
